<template>
  <div class="header">
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          v-for="(item, index) in breadList"
          :key="index"
          :to="{ path: item.path }"
          >{{ item.title }}</el-breadcrumb-item
        >
        <!-- <el-breadcrumb-item :to="{path:'/users/list'}">活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
      </el-breadcrumb>
    </div>
    <div>
      <ul class="right">
        <li>
          <el-dropdown  @command="handleCommand">
            <span class="el-dropdown-link">
              欢迎，{{accountInfo.account}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">个人中心</el-dropdown-item>
              <el-dropdown-item command="2">修改密码</el-dropdown-item>
              <el-dropdown-item command="3">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li>
          <div class="demo-type">
            <div>
              <el-image
                :src="accountInfo.imgUrl"
              ></el-image>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {api_personal} from '../../api/users';
export default {
  data() {
    return {
      breadList: [],
      accountInfo:{}
    };
  },
  mounted() {
   this.getpersonal();
   this.$bus.$on("sendHead",this.setHead)
  },
  watch: {
    $route: {
      deep: true,
      immediate:true,//当页面刷新就执行一次handler,就是刷新后你的导航列表路径不变
      handler() {
     
         let arr=[];
              this.$route.matched.forEach((item)=>{
                // {path:"/users/list",title:"用户列表"},就是把这个变成了活参数，不用一个一个写
        //   // matched中获取path，也就是路由路径
                if(item.meta.title && item.meta.title!='首页'){
                 arr.push({path:item.path,title:item.meta.title})
                 }
              })
        this.breadList = arr;
        console.log(arr);
        console.log(this.$route.matched);
      },
    },
  },
  methods: {
    gopath(path){
      this.$router.push(path);
    },
    setHead(url){
      this.accountInfo.imgUrl=url;
      // 更新本地存储图片地址
      this.$session.set("accountInfo",this.accountInfo)
    },
    // 头像
  async getpersonal() {
      let rst= await api_personal();
      this.accountInfo=rst.accountInfo;
      // rst.accountInfo就是把所有的数据存储在本地会话存储里
      this.$session.set("accountInfo",rst.accountInfo)
      console.log(rst);
    },
    handleCommand(command) {
      if(command==3){
        this.$session.clear();
        this.$router.replace("/login");
      }else if(command==2){
          this.$router.replace("/users/pwd");
      }else{
          this.$router.replace("/users/personal");
      }
        console.log(command);
      }
  },
};
</script>

<style lang="less" scoped>
.header {
  // background-color: #B3C0D1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  .right {
    display: flex;
    align-items: center;
    .el-image {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }
  }
}
</style>
